<template>
  <div class="app-container">
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">服务总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">10</el-col>
                <el-col :span="6" class="color-danger overview-item-value">30</el-col>
                <el-col :span="6" class="color-danger overview-item-value">50</el-col>
                <el-col :span="6" class="color-danger overview-item-value">90</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">已下架</el-col>
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">库存紧张</el-col>
                <el-col :span="6" class="overview-item-title">全部服务</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">客户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">10</el-col>
                <el-col :span="6" class="color-danger overview-item-value">20</el-col>
                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                <el-col :span="6" class="color-danger overview-item-value">500</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">客户总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">
        <span>预约单统计</span>
        <el-date-picker
          style="float: right;z-index: 1;margin-top: -5px;"
          size="small"
          v-model="orderCountDate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <el-row>
        <el-col :span="24">
          <el-card>
            <div id="serviceLineBox" class="chart-box" style="width: 100%;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {str2Date} from '@/utils/date';
  import echarts from 'echarts';
  export default {
    name: 'home',
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一月',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        orderCountDate: '',
        chartLine: null,
        chartBar: null,
      }
    },
    mounted () {
      this.initChartLine()
    },
    methods:{
      handleDateChange(){

      },
      // 折线图
      initChartLine () {
        var option = {
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ '化妆服务', '美甲服务', '美睫服务', '护肤服务', '按摩服务' ]
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': '化妆服务',
              'type': 'line',
              'stack': '总量',
              'data': [ 12, 12, 10, 13, 90, 23, 21 ]
            },
            {
              'name': '美甲服务',
              'type': 'line',
              'stack': '总量',
              'data': [ 22, 18, 19, 23, 29, 33, 31 ]
            },
            {
              'name': '美睫服务',
              'type': 'line',
              'stack': '总量',
              'data': [ 15, 23, 20, 15, 19, 33, 41 ]
            },
            {
              'name': '护肤服务',
              'type': 'line',
              'stack': '总量',
              'data': [ 32, 33, 30, 33, 39, 33, 32 ]
            },
            {
              'name': '按摩服务',
              'type': 'line',
              'stack': '总量',
              'data': [ 82, 93, 90, 93, 12, 13, 13 ]
            }
          ]
        }
        this.chartLine = echarts.init(document.getElementById('serviceLineBox'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      },
      
    }
  }
</script>

<style scoped>
  .app-container {
    margin-left: 20px;
    margin-right: 20px;
  }

  .layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
    line-height: 25px;
  }

  .overview-layout {
    margin-top: 20px;
  }

  .overview-item-value {
    font-size: 24px;
    text-align: center;
  }

  .overview-item-title {
    margin-top: 10px;
    text-align: center;
  }

  .out-border {
    border: 1px solid #DCDFE6;
  }

  .statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .chart-box {
    min-height: 400px;
  }
</style>
